import { defineComponent, reactive, Teleport } from "vue";
import styles from "./BatchImport.module.less";
import LIcon from "@/components/public/lIcon/lIcon";
import { CloudUploadOutlined } from "@ant-design/icons-vue";
import { UploadProps } from "ant-design-vue";

export default defineComponent({
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const state = reactive({
      isShow: false,
      fileList: [],
    } as any)
    const open = () => {
      state.fileList = [];
      state.isShow = true;
    }
    //手动上传
    const beforeUpload: UploadProps["beforeUpload"] = (file) => {
      state.fileList = [file];

      return false;
    };
    //确认上传
    const upload = () => {
      console.log(state.fileList);
      emit('confirm', state.fileList);
      state.isShow = false;
    }

    expose({
      open,
    })
    return () => (
      <div class={styles['batch-import-floating']} v-show={state.isShow}>
        <div class={styles['batch-import-card']}>
          <div class={styles['batch-import-header']}>
            <span class={styles.title}>批量导入被保人信息</span>
            <div class={styles['delete-icon']} onClick={() => { state.isShow = false; }}>
              <LIcon type="icon-delete-x" class={styles.icon} />
            </div>
          </div>
          <div class={styles['batch-import-container']}>
            <div class={styles['warning_text']}>请上传批量添加被保人模板填好的Excel文档</div>
            <a-upload-dragger
              class={styles['upload-demo']}
              v-model:fileList={state.fileList}
              before-upload={beforeUpload}
              name="file"
            >
              <div class={styles['batch-import-btn']}>
                <p class="ant-upload-drag-icon">
                  <CloudUploadOutlined />
                </p>
                <p class="ant-upload-text">将文件拖到此处，或<span class={styles.link}>点击上传</span></p>
              </div>
            </a-upload-dragger>
            <div class={styles['upload-btn']} onClick={() => { upload() }}>确认上传</div>
          </div>
        </div>
      </div>
    )
  }
})